<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
    <script src="lib/prop-types.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    // 子组件接收父组件传递过来的属性时，可以对其类型进行限制
    // 1- 引入prop-types.js文件
    // 2- 在接收属性的组件中进行限制
    //    2-1:限制类型
    //    2-2:限制默认值
    const root = ReactDOM.createRoot(document.querySelector('#root'))
    class App extends React.Component {
        render() {
            return (
                <Child name='kasha' age={18}/>
            )
        }
    }
    class Child extends React.Component {
        static propTypes = {
            name: PropTypes.string,
            age: PropTypes.number
        }
        static defaultProps = {
            skill: '艾卡西亚暴雨'
        }
        render() {
            return (
                <>
                    <h1>{this.props.name}</h1>
                    <h1>{this.props.age}</h1>
                    <h1>{this.props.skill}</h1>
                </>
            )
        }
    }



    root.render(<App />)



</script>

</html>